@charset'utf-8';
@import'color';
@import'model.scss';
$themeColor:$cyan;
html,body{
	margin: 0;
	width: 100%;
	height: 100%;
	font-size: 13px;
}
* {
    font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif!important;
}
.body{
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	position: relative;
	.video{
		width: 100%;
		height: 50%;
		position: relative;
		color:$black;
		video{
			background-color: $black;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.chatbox{
		width: 100%;
		height: 50%;
		position: relative;
		box-sizing: border-box;
		padding: 2.5rem 2%;
		background-color: #efefef;
		.title{
			font-size: 15px;
			width: 100%;
			font-weight: lighter;
			@include Line(1);
			position: absolute;
			height: 2rem;
			line-height: 1.6rem;
			top: 0;
			left: 0; 
			box-sizing: border-box;
			background-color: $white;
			padding: .2rem;
		}
		.replybox{
			position: absolute;
			height: 2rem;
			background-color: $white;
			box-sizing: border-box;
			left: 0;
			padding: .2rem;
			width: 100%;
			left: 0;
			bottom: 0;
			input{
				width: 70%;
				border: 1px solid #ccc;
			}
			.icon-baocun{
				width: 10%;
				display: inline-block;
				text-align: center;
				height: 1.6rem;
				line-height: 1.6rem;
				font-size: 15px;
			}
			button{
				width: 18%;
				padding: 0;
				height: 1.6rem;
				text-align: center;
				line-height: 1.6rem;
				border: 0;
				background-color: $themeColor;
				color: $white;
			}
		}
		.box{
			width: 100%;
			height: 100%;
			overflow-y: scroll;
			.msgitem{
				&.focus{
					text-align: right;
					.msg{
						background-color: $themeColor;
						color: $white;;
					}
				}
				.msg{
					display: inline-block;
					width: 100%;
					margin-bottom: 5px;
					padding: .5rem;;
					background-color:$white;
					color:$black;
					min-width: 40%;
					max-width: 85%;
					text-align: left;
					line-height: 1.5rem;
					img{
						margin-bottom: 5px;
						max-width: 100%;
						height: auto;
					}
				}
			}
		}
	}
}